import React, {useEffect, useRef, useState} from 'react';
import {Button, Form, Modal} from "antd";
import ProForm, {ProFormRadio, ProFormSelect, ProFormText, ProFormTextArea} from "@ant-design/pro-form";
import {ActionType} from "@ant-design/pro-table";
import {getUserGroup, getUserLable, getUserLevel} from "@/services/ant-design-pro/users";
import Select from '@ant-design/pro-form/lib/components/Select';


const EditUser = (props) => {
  const {isShowUser,open,closed,record} = props
  const [isLevel,setIsLevel] = useState([])
  const [isGroup,setIsGroup] = useState([])
  const [isLabel,setIsLabel] = useState([])
  const [isShowPop,setIsShowPop] = useState([])
  const [form] = Form.useForm();
  const actionRef = useRef<ActionType>();



  useEffect(async ()=>{
    // 用户等级的列表
    const userLevel = await getUserLevel()
    setIsLevel(userLevel.data.map(item=>{
      return {
        label:item.name,
        value:item.id
      }
    }))

    // 用户分组的列表
    const userGroup = await getUserGroup();
    setIsGroup(userGroup.data.map(item=>{
      return {
        label:item.nickname,
        value:item.id
      }
    }))

    // 用户标签的列表
    const userLabel =await getUserLable()
    setIsLabel(userLabel.data.map(item=>{
      return {
        label:item.label_name,
        value:item.id
      }
    }))

    // 为了拿到用户标签的原始数据
    const pop = record.userlabel?.data.map(item=>{
      return {
        label:item.label_name,
        value:item.id
      }
    })
    console.log(pop);
    setIsShowPop(pop)
  },[])


  return (
    <div>
      <Modal
        width={700}
        visible={isShowUser}
        destroyOnClose={true}
        title='编辑用户'
        onOk={()=>{
          form.validateFields().then(values=>{
            open(values)
            actionRef.current?.reload()
          })
        }}
        onCancel={async (values)=>{
          closed(values)
          actionRef.current?.reload()
        }}
      >
      <ProForm
        form={form}
        submitter={false}
      >
        <ProFormText
          initialValue={record.id}
          name="id"
          label="用户ID"
          placeholder="请输入用户ID"
        />
        <ProFormText
          initialValue={record.nickname}
          name="nickname"
          label="真实姓名"
          placeholder="请输入用户姓名"
        />
        <ProFormText
          initialValue={record.phone}
          name="phone"
          label="手机号码"
          placeholder="请输入用户手机号码"
        />
        <ProFormSelect
          name='sex'
          label='性别'
          initialValue={record.sex}
          placeholder='请选择用户性别'
          valueEnum={
            {
              '1': {text: '男', status: 'Default'},
              '0': {text: '女', status: 'Processing'}
            }
          }
        />
        <ProFormTextArea
          initialValue={record.remark}
          name="remark"
          label="用户备注"
          placeholder="请输入用户备注"
        />
        <ProFormSelect
          initialValue={record.level}
          name='level'
          label='用户等级'
          placeholder='请输入用户等级'
          options={isLevel}
        />
        <ProFormSelect
          initialValue={record.catrgory?.nickname}
          name='group'
          label='用户分组'
          placeholder='请输入用户分组'
          options={isGroup}
        />
        <ProFormSelect
          initialValue={isShowPop}
          name='label_id'
          label='用户标签'
          placeholder='请输入用户标签'
          options={isLabel}
        />
        <ProFormRadio.Group
          name="is_extension"
          label="推广资格"
          initialValue={record.is_extension}
          options={[
            {label: '启用', value: '0',},
            {label: '禁用', value: '1',},
          ]}
        />
        <ProFormRadio.Group
          name="status"
          label="用户状态"
          initialValue={record.status}
          options={[
            {label: '开启', value: '0',},
            {label: '锁定', value: '1',},
          ]}
        />
      </ProForm>
      </Modal>
    </div>
  );
};

export default EditUser;
